import { RouterLink } from 'vue-router';

<template>
  <div class="account-module">
    <div class="login" :style="{ background: 'url(' + bgImg + ') center  top', backgroundSize: '100% auto' }">
      <!-- <img src="@/assets/bg.png" class="bg"/> -->
      <div class="logo">
        <img src="@/assets/bg3.png" class="bg2" />
      </div>
      <div class="m">
        <div style="text-align:center">
          <img src="@/assets/bgword.png" class="bgword" />
          <br />
          <div style="background-color: #fff;" class="ercode">
            <img src="@/assets/ercode.jpeg" />
            <div style="color: #959CA9; font-size:14px;">
              关注协会公众号 <br />
              获取协会资讯
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">欢迎登录协会报名平台</div>
          <div class="item">
            <span class="gb" style="width: 90px;">
              <el-select v-model="ruleForm.code" style="width: 80px; border: none;box-shadow: none;">
                <el-option value="" label="+86"></el-option>
                <el-option value="852" label="+852"></el-option>
                <el-option value="853" label="+853"></el-option>
              </el-select>
            </span>
            <input v-model.trim="ruleForm.name" placeholder="请输入手机号" />
          </div>
          <div class="item">
            <input v-model.trim="ruleForm.pwd" placeholder="请输入验证码" /><span class="code" @click="sendCode">{{
      btns.sendmsg }}</span>
          </div>
          <div class="agreement"> <el-checkbox v-model="ruleForm.checked2" />点击同意并接受即表示您已阅读了解并同意 <el-button type="text"
              @click="dialogShow = true">《用户协议》</el-button></div>
          <el-button
              class="btn"
              style="line-height: 50px; height: 50px; width: 100%;"
              @click="login()"
              :loading="btnDisabled">立即登录</el-button>
          <div class="url" style="display: flex;justify-content: space-between;">
            <router-link class="one" target="_blank" tag="a" to="/certificate">证书查询</router-link>
            <!-- 暂时拿掉注册
            <router-link class="one" tag="a" to="/account/user">立即注册</router-link>
            -->
          </div>
          <div style="margin-top: 30px;color: #959CA9;font-size: 12px;">

          </div>

        </div>
      </div>


    </div>
  </div>



  <el-dialog title="用户协议" v-model="dialogShow" width="700px">
    <div style="text-align: left; line-height: 35px;" class="student">
      一、参赛选手：<br />
      1.本人自愿报名参加青岛市轮滑协会大赛。<br />
      2.本人填报的信息均真实有效。<br />
      3.本人在正式提交参赛前，已检查核实所有填报信息和上传文件，确认符合申报要求和赛项规定，如因填写错误造成的后果由本人自行承担。<br />
      二、大赛组委会<br />
      对收集的“青岛市轮滑协会”的参赛选手信息仅限于本大赛组织管理使用。<br />
      <br /><br />
    </div>
    <div style="text-align: center" slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">我知道了</el-button>
    </div>
  </el-dialog>


</template>

<script lang="ts" setup>
import { defineComponent, reactive, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, UploadProps } from "element-plus";
import baseService from "@/service/baseService";
import { getCache, setCache } from "@/utils/cache";
import { useRouter } from "vue-router";
let router = useRouter();
const bgImg = require('../../assets/bg.png')
const ruleForm = reactive({
  code: "",
  name: "",
  pwd: "",
  checked2: true
});

const btns = reactive({
  sendmsg: "发送验证码",
  disabled: false
});

const dialogShow = ref(false);

const btnDisabled = ref(false);

/**
 * 登录
 */
const login = async (formEl: FormInstance | undefined) => {
  btnDisabled.value = true;
  if (!ruleForm.checked2) {
    ElMessage.error("您未同意用户协议，请先同意！");
    return;
  }
  // 校验手机号格式
  if (!checkPhone()) {
    btnDisabled.value = false;
    return;
  }
  //校验验证码不能为空
  if (ruleForm.pwd === "") {
    ElMessage.error("验证码不能为空！");
    btnDisabled.value = false;
    return;
  }

  baseService
      .post("/front/spuser/login", {account: ruleForm.code + ruleForm.name, verificationCode: ruleForm.pwd})
      .then((res) => {
            if (res.code === 0) {
              const certificate = {
                realName: res.data.realName,
                idCard: res.data.idCard
              };
              setCache("certificate", certificate, true);
              setCache("CacheToken", res.data, true);
              // 成功登录后将token存入cookie
              // 设置cookies
              //$cookies.set("loginCookie", res.data.account, '1m', '/', 'fii-cc.com');
              router.push(res.data.url);
              // 跳转代表队
              //router.push("/team/index");
              // 跳转到领队注册页面
              //router.push("/account/team");
            } else {
              ElMessage.error(res.msg);
            }
          }
      ).finally(() => {
        btnDisabled.value = false;
      });
};

// 校验手机号格式
const checkPhone = () => {
  //校验手机号不能为空
  if (ruleForm.name === "") {
    ElMessage.error("手机号格式不正确！");
    return false;
  }
  // 判断国际区号
  if (ruleForm.code === '') {
    if (ruleForm.name.length != 11) {
      ElMessage.error("手机号格式不正确！");
      return false;
    }
  } else if (ruleForm.code === '852') {
    if (!(ruleForm.name.length == 8 || ruleForm.name.length == 9)) {
      ElMessage.error("手机号格式不正确！");
      return false;
    }
  } else if (ruleForm.code === '853') {
    if (ruleForm.name.length != 8) {
      ElMessage.error("手机号格式不正确！");
      return false;
    }
  }
  return true;
};


/**
 * 发送验证码
 */
const sendCode = () => {
  //校验ruleForm.name不能为空
  if (ruleForm.name === "") {
    ElMessage.error("手机号不能为空！");
    return;
  }
  // 校验手机号格式
  if (!checkPhone()) {
    return;
  }

  if (btns.disabled) {
    return;
  }
  btns.sendmsg = "验证码已发送";
  baseService
    .post("/front/spuser/getCheckCode", { phone: ruleForm.code + ruleForm.name, code: ruleForm.code })
    .then((res) => {
      if (res.code === 0) {
        ElMessage.success('验证码发送成功');
        countDown();
      }
    });
}

/**
 * 短信验证码倒计时功能
 */
let timer: any = null;
const countDown = () => {
  let count = 60;
  btns.disabled = true;
  btns.sendmsg = count + "s后重新发送";
  timer = setInterval(() => {
    count--;
    btns.sendmsg = count + "s后重新发送";
    if (count <= 0) {
      clearInterval(timer);
      btns.sendmsg = "发送验证码";
      btns.disabled = false;
    }
  }, 1000);
};

const isMobile = () => {
  const userAgent = navigator.userAgent;
  const mobileKeywords = [
    'Android',
    'iPhone',
    'iPad',
    'Windows Phone',
    'BlackBerry',
    'Opera Mini',
    'Symbian',
    'Kindle',
    'Mobile'
  ];
  const regex = new RegExp(mobileKeywords.join('|'), 'i');
  if(regex.test(userAgent)){
    router.push('/auth/login')
  }
}
isMobile();



</script>

<style lang="scss" scoped>
@import 'account.scss';
</style>
